<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>组件</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <style>
    .header {
      height: 100px;
      background: #aef;
    }

    .main {
      height: 400px;
      background: rgb(162, 140, 184);
    }

    .footer {
      height: 100px;
      background: rgb(212, 161, 126);
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    //创建虚拟 DOM 对象
    //如果标签名首字母是 小写, 则会解析渲染为 HTML 的标签
    //如果标签名首字母是 大写, 则会解析为一个组件. 内部会寻找对应名称的函数或者类
    // let vdom = <div>
    //     <SPAN>哈喽</SPAN>
    //   </div>;

    // //渲染
    // ReactDOM.render(vdom, document.querySelector('#root'))

    //创建一个虚拟 DOM 对象
    // let vdom = <div>
    //   <div className="header"></div>
    //   <div className="main"></div>
    //   <div className="footer"></div>
    // </div>


    function Header() {
      return <div className="header"></div>
    }
    let Main = () => <div className="main"></div>

    let Footer = function () {
      return <div className="footer"></div>
    }
    // let vdom = <div>
    //   <Header></Header>
    //   <Main></Main>
    //   <Footer />
    // </div>

    let App = function () {
      return <div>
        <Header></Header>
        <Main></Main>
        <Footer />
      </div>
    }

    //渲染
    ReactDOM.render(<App/>, document.querySelector('#root'));
  </script>
</body>

</html>